<template>
  <div class="coupon">
    <header>
      <van-icon name="arrow-left" @click="handleBack()" size="25"/>
      <span>优惠券</span>
    </header>
    <van-tabs v-model:active="active" color="#55a024" line-width="125px">
      <van-tab title="未使用" style="padding-top:20px">
        <div class="tips">
          <span style="font-size:36px;font-weight: bolder;"><i style="font-size:20px;font-style: normal;">￥</i>10</span>
          <span style="width:56px;font-weight: bolder;">全场通用<br>满50可用</span>
          <span class="btn">立即使用</span>
          <p class="p">有效期至2022.12.32</p>
          <img src="https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/确认订单/u2289.png" alt="" class="img-l">
          <img src="https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/确认订单/u2291.png" alt="" class="gang">
          <img src="https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/确认订单/u2289.png" alt="" class="img-r">
        </div>
        <div class="tips">
          <span style="font-size:36px;font-weight: bolder;"><i style="font-size:20px;font-style: normal;">￥</i>10</span>
          <span style="width:56px;font-weight: bolder;">全场通用<br>满50可用</span>
          <span class="btn">立即使用</span>
          <p class="p">有效期至2022.12.32</p>
          <img src="https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/确认订单/u2289.png" alt="" class="img-l">
          <img src="https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/确认订单/u2291.png" alt="" class="gang">
          <img src="https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/确认订单/u2289.png" alt="" class="img-r">
        </div>
        <div class="tips">
          <span style="font-size:36px;font-weight: bolder;"><i style="font-size:20px;font-style: normal;">￥</i>10</span>
          <span style="width:56px;font-weight: bolder;">全场通用<br>满50可用</span>
          <span class="btn">立即使用</span>
          <p class="p">有效期至2022.12.32</p>
          <img src="https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/确认订单/u2289.png" alt="" class="img-l">
          <img src="https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/确认订单/u2291.png" alt="" class="gang">
          <img src="https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/确认订单/u2289.png" alt="" class="img-r">
        </div>
        <div class="tips">
          <span style="font-size:36px;font-weight: bolder;"><i style="font-size:20px;font-style: normal;">￥</i>10</span>
          <span style="width:56px;font-weight: bolder;">全场通用<br>满50可用</span>
          <span class="btn">立即使用</span>
          <p class="p">有效期至2022.12.32</p>
          <img src="https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/确认订单/u2289.png" alt="" class="img-l">
          <img src="https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/确认订单/u2291.png" alt="" class="gang">
          <img src="https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/确认订单/u2289.png" alt="" class="img-r">
        </div>
      </van-tab>
      <van-tab title="已使用" style="padding-top:20px" class="used">
        <div class="tips">
          <span style="font-size:36px;font-weight: bolder;"><i style="font-size:20px;font-style: normal;">￥</i>10</span>
          <span style="width:56px;font-weight: bolder;">全场通用<br>满50可用</span>
          <span class="btn">立即使用</span>
          <p class="p">有效期至2022.12.32</p>
          <img src="https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/确认订单/u2291.png" alt="" class="gang">
          <img src="https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/优惠券/u3537.png" alt="" class="img-used">
          <span class="t-used">已使用</span>
        </div>
        <div class="tips">
          <span style="font-size:36px;font-weight: bolder;"><i style="font-size:20px;font-style: normal;">￥</i>10</span>
          <span style="width:56px;font-weight: bolder;">全场通用<br>满50可用</span>
          <span class="btn">立即使用</span>
          <p class="p">有效期至2022.12.32</p>
          <img src="https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/确认订单/u2291.png" alt="" class="gang">
          <img src="https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/优惠券/u3537.png" alt="" class="img-used">
          <span class="t-used">已使用</span>
        </div>
        <div class="tips">
          <span style="font-size:36px;font-weight: bolder;"><i style="font-size:20px;font-style: normal;">￥</i>10</span>
          <span style="width:56px;font-weight: bolder;">全场通用<br>满50可用</span>
          <span class="btn">立即使用</span>
          <p class="p">有效期至2022.12.32</p>
          <img src="https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/确认订单/u2291.png" alt="" class="gang">
          <img src="https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/优惠券/u3537.png" alt="" class="img-used">
          <span class="t-used">已使用</span>
        </div>
        <div class="tips">
          <span style="font-size:36px;font-weight: bolder;"><i style="font-size:20px;font-style: normal;">￥</i>10</span>
          <span style="width:56px;font-weight: bolder;">全场通用<br>满50可用</span>
          <span class="btn">立即使用</span>
          <p class="p">有效期至2022.12.32</p>
          <img src="https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/确认订单/u2291.png" alt="" class="gang">
          <img src="https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/优惠券/u3537.png" alt="" class="img-used">
          <span class="t-used">已使用</span>
        </div>
      </van-tab>
      <van-tab title="已过期" style="padding-top:20px" class="used">
        <div class="tips">
          <span style="font-size:36px;font-weight: bolder;"><i style="font-size:20px;font-style: normal;">￥</i>10</span>
          <span style="width:56px;font-weight: bolder;">全场通用<br>满50可用</span>
          <span class="btn">立即使用</span>
          <p class="p">有效期至2022.12.32</p>
          <img src="https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/确认订单/u2291.png" alt="" class="gang">
          <img src="https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/优惠券/u3569.png" alt="" class="img-used">
          <span class="t-used">已过期</span>
        </div>
        <div class="tips">
          <span style="font-size:36px;font-weight: bolder;"><i style="font-size:20px;font-style: normal;">￥</i>10</span>
          <span style="width:56px;font-weight: bolder;">全场通用<br>满50可用</span>
          <span class="btn">立即使用</span>
          <p class="p">有效期至2022.12.32</p>
          <img src="https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/确认订单/u2291.png" alt="" class="gang">
          <img src="https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/优惠券/u3569.png" alt="" class="img-used">
          <span class="t-used">已过期</span>
        </div>
        <div class="tips">
          <span style="font-size:36px;font-weight: bolder;"><i style="font-size:20px;font-style: normal;">￥</i>10</span>
          <span style="width:56px;font-weight: bolder;">全场通用<br>满50可用</span>
          <span class="btn">立即使用</span>
          <p class="p">有效期至2022.12.32</p>
          <img src="https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/确认订单/u2291.png" alt="" class="gang">
          <img src="https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/优惠券/u3569.png" alt="" class="img-used">
          <span class="t-used">已过期</span>
        </div>
        <div class="tips">
          <span style="font-size:36px;font-weight: bolder;"><i style="font-size:20px;font-style: normal;">￥</i>10</span>
          <span style="width:56px;font-weight: bolder;">全场通用<br>满50可用</span>
          <span class="btn">立即使用</span>
          <p class="p">有效期至2022.12.32</p>
          <img src="https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/确认订单/u2291.png" alt="" class="gang">
          <img src="https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/优惠券/u3569.png" alt="" class="img-used">
          <span class="t-used">已过期</span>
        </div>
      </van-tab>
    </van-tabs>

  </div>
</template>

<script>
import { ref } from 'vue';
  export default {
    setup() {
    const active = ref(0);
    return { active };
    },
    methods: {
      handleBack() {
        this.$router.back()
      },
    },
}
</script>

<style lang="less" scoped>
  header{
    height: 44px;
    font-size: 16px;
    line-height: 44px;
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 5px;
  }
  .tips{
    width: 335px;
    height: 120px;
    margin: 10px auto;
    display: flex;
    position: relative;
    justify-content: space-around;
    align-items: center;
    background-image: url('https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/确认订单/u2277.png');
  }
  .tips span{
    font-size: 13px;
    color: #666666;
  }
  .tips .p{
    position: absolute;
    bottom: 6px;
    left: 20px;
    margin: 0;
    font-size: 13px;
  }
  .tips .btn{
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #55a034;
    border-radius: 15px;
    color: white;
  }
  .tips .img-l{
    position: absolute;
    left: -2px;
    bottom:28px;
    transform:rotate(90deg);
  }
  .tips .img-r{
    position: absolute;
    right: -2px;
    bottom: 28px;
    transform:rotate(-90deg);
  }
  .tips .gang{
    position: absolute;
    bottom: 30px;
  }

  .used .tips{
    background-image: url('https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/优惠券/u3513.png');
  }
  .used .tips .btn{
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 15px;
    color: white;
    opacity: 0;
  }
  .used .tips .img-used{
    transform:rotate(180deg);
    position: absolute;
    top: 0;
    right: 0;
  }
  .used .tips .t-used{
    transform:rotate(57deg);
    position: absolute;
    top: 13px;
    right: 0;
    color: white;
  }
</style>
